<template>
	<view>
		<view class="suggest">
			<view class="suggest-top">
				<view class="suggest-top-title">
					<view class="suggest-top-title-connet">
						<text style="color: white;font-size: 36rpx;">在线客服</text>
						<text style="color: white;font-size: 36rpx;">随时为你服务</text>
					</view>
				</view>
				<view class="suggest-top-img">
					<image src="../../pagesA/static/suggest/answer01.png" mode="widthFix"
						style="width: 100%; height: 80%;"></image>
				</view>
			</view>
			<view class="suggest-connet">
				<view class="suggest-connet-part">
					<view class="suggest-connet-part-connet">
						<view class="suggest-connet-part-connet-top">
							<view class="suggest-connet-part-connet-top-title">
								<text style="font-size: 36rpx; font-weight: bold;">请选择类型</text>
							</view>
							<view class="suggest-connet-part-connet-top-tip">
								<image src="../static/suggest/warn1.png"
									style="width: 36rpx;height: 36rpx;margin-right: 24rpx;"></image>
								<text style="font-size: 28rpx;">须知</text>
							</view>
						</view>
						<view class="line"></view>
						<view class="suggest-lists" @click="ToSuggest3(item.id)" v-for="(item,index) in problem"
							:key="index">
							<view class="suggest-lists-part">
								<view class="suggest-lists-left">
									<image src="../static/suggest/service-dot.png"
										style="width: 10rpx; height: 10rpx;margin-right: 20rpx;"></image>
									<text style="font-size: 28rpx;">{{item.article_title}}</text>
								</view>
								<view class="suggest-lists-right">
									<image src="../static/suggest/right.png" style="width: 25%; height: 25%;">
									</image>
								</view>
							</view>
							<view class="line"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="suggegst-newbottom">
				<view class="suggegst-newbottom-part">
					<button open-type="contact" class="contact">
						<image src="../../static/service/answer02.png" mode="widthFix"
							style="width: 128rpx;height: 128rpx;" @click="TOService()"></image>
						</image>
					</button>
					<!-- <image src="../../pagesA/static/suggest/answer03.png" mode="widthFix"
						style="width: 164rpx;height: 128rpx;" @click="ToSuggest2()"></image> -->
				</view>
			</view>

		</view>
		<view class="suggest-model" v-show="ShowModel">
			<view class="suggest-model-part">
				<view class="suggest-model-part-title">
					<text class="suggest-model-part-title-text">须知</text>
				</view>
				<view class="suggest-model-part-icon" @click="CloseModel()">
					<image src="../static/suggest/close.png" style="width: 64rpx;height: 64rpx;"></image>
				</view>
				<view class="suggest-tips">
					<view class="suggest-tips-part">
						<text style="font-size: 26rpx;">1.</text>
					</view>
					<view class="suggest-tips-part">
						<text style="font-size: 26rpx;">2.</text>
					</view>
					<view class="suggest-tips-part">
						<text style="font-size: 26rpx;">3.</text>
					</view>
					<view class="suggest-tips-part">
						<text style="font-size: 26rpx;">3.</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ShowModel: false,
				// problem:['产品建议','假冒伪劣','品牌欺诈','价格欺诈','虚假宣传','以租赁形式从事贷款','退换货问题']
				problem: []
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.title
			})
			this.getTypeData(e);
		},
		methods: {
			getTypeData(e) {
				if (e.type_id) {
					const data = {
						type: e.type_id
					}
					this.$http("GET", "Help/getCommonProblemType", data)
						.then(res => {
							this.problem = res.data.data
						})
				} else {
					uni.request({
						method: "GET",
						url: this.$apiUrl + "Help/getCommonProblemType?type",
						success: (res) => {
							this.problem = res.data.data
						}
					})
				}
			},
			TOService() {
				uni.switchTab({
					url: '/pages/service/service'
				})
			},
			CloseModel() {
				this.ShowModel = false
			},
			ShowTipsModel() {
				this.ShowModel = true
			},
			ToSuggest2() {
				uni.navigateTo({
					url: '/pagesA/suggest/suggest2'
				})
			},
			ToSuggest3(id) {
				uni.navigateTo({
					url: '/pagesA/help/help?id=' + id
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}

	.suggest-top {
		width: 100%;
		height: 360rpx;
		line-height: 0;
		background-image: linear-gradient(to left, rgba(246, 112, 110), rgba(255, 126, 99));
		border-radius: 0 0 56rpx 56rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.suggest-top-title {
		/* 		position: relative; */
		width: 50%;
		height: 100%;
		/* 		top: -320rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-top-title-connet {
		width: 78%;
		height: 40%;
		display: flex;
		justify-content: flex-start;
		align-content: space-around;
		flex-wrap: wrap;
		font-weight: bold;
	}

	.suggest-connet {
		width: 100%;
		height: 800rpx;
		position: relative;
		top: -60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-connet-part {
		width: 90%;
		height: 100%;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx;
	}

	.line {
		border: 0;
		border-top: 2rpx solid #f7f7f7;
	}

	.suggest-connet-part-connet {
		width: 92%;
		height: 100%;
	}

	.suggest-connet-part-connet-top {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.suggest-connet-part-connet-top-title {
		width: 240rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-connet-part-connet-top-tip {
		width: 128rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-lists {
		width: 100%;
	}

	.suggest-lists-left {
		width: 450rpx;
		height: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.suggest-lists-part {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.suggest-lists-right {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-button1 {
		width: 240rpx;
		height: 80rpx;
		color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border: red solid 2rpx;
		border-radius: 48rpx;
	}

	.suggest-button2 {
		width: 240rpx;
		height: 80rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: red;
		border-radius: 48rpx;
	}

	.suggest-bottom {
		height: 120rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.suggest-model {
		width: 100%;
		height: 100%;
		z-index: 99;
		background-color: rgba(125, 125, 125, 0.3);
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-model-part {
		width: 80%;
		height: 520rpx;
		background-color: white;
		border-radius: 24rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.suggest-model-part-title {
		width: 80%;
		height: 90rpx;
		display: flex;
		align-items: center;
	}

	.suggest-model-part-title-text {
		font-size: 38rpx;
		font-weight: bold;
		position: relative;
		left: 55%;
	}

	.suggest-model-part-icon {
		width: 20%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-tips {
		width: 100%;
		height: 80%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.suggest-tips-part {
		width: 80%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggest-top-img {
		width: 40%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggegst-newbottom {
		width: 100%;
		height: 68px;
		position: relative;
		top: -20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.suggegst-newbottom-part {
		width: 90%;
		height: 100%;
		background-color: white;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.contact {
		margin: 0;
		padding: 0;
		width: 140rpx;
		height: 100rpx;
		border: none !important;
		border-radius: 0 !important;
		/* 		display: flex;
			justify-content: center;
			align-items: center; */
		background-color: transparent !important;
	}

	button::after {
		border: none;
	}
</style>
